<template>
	<Container>
		<view class="loan-calc-index">
			<view class="bg"></view>
			<view class="form">
				<view class="form-item">
					<view class="inp-box">
						<view class="lab">贷款金额</view>
						<view class="inp">
							<input v-model="params.money" type="text" placeholder="请输入金额" />
						</view>
					</view>
					<view class="unit">
						<view class="text" :class="[unit.value === params.priceUnit ? 'active' : '']" v-for="(unit, index) in moenyUnit" :key="index" @click="selectUnit('priceUnit', unit.value)">{{unit.name}}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="inp-box">
						<view class="lab">贷款期限</view>
						<view class="inp">
							<input v-model="params.term" type="text" placeholder="请输入贷款期限" />
						</view>
					</view>
					<view class="unit">
						<view class="text" :class="[unit.value === params.termUnit ? 'active' : '']" v-for="(unit, index) in termUnits" :key="index" @click="selectUnit('termUnit', unit.value)">{{unit.name}}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="inp-box">
						<view class="lab">贷款利率(%)</view>
						<view class="inp">
							<input v-model="params.rate" type="text" placeholder="请输入贷款利率" />
						</view>
					</view>
					<view class="unit">
						<view class="text" :class="[unit.value === params.yOrmUnit ? 'active' : '']" v-for="(unit, index) in yOrmUnits" :key="index" @click="selectUnit('yOrmUnit', unit.value)">{{unit.name}}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="inp-box">
						<view class="lab">还款方式</view>
						<view class="inp">
							<view class="inp-block" @click="selectType"></view>
							<input disabled v-model="params.repayment" type="text" placeholder="请选择还款方式" />
						</view>
					</view>
				</view>
			</view>
			<view class="btns">
				<div class="cancel" @click="clear">清 空</div>
				<view class="submit" @click="submit">计 算</view>
			</view>
		</view>
		<repaymentPop v-model="showRepaymentPop" @select="selectTypeCb" />
	</Container>
</template>

<script>
	import repaymentPop from './components/repayment-pop.vue';
	export default {
		components: {
			repaymentPop
		},
		data() {
			return {
				moenyUnit: [{name: '元', value: 'yuan'}, {name: '万', value: 'wan'}],
				termUnits: [{name: '年', value: 'year'}, {name: '月', value: 'month'}],
				yOrmUnits: [{name: '年', value: 'year'}, {name: '月', value: 'month'}],
				params: {
					money: '', // 贷款金额
					priceUnit: 'wan',
					term: '', // 贷款期限
					termUnit: 'year',
					rate: '', // 贷款利率
					yOrmUnit: 'year', // 贷款利率周期
					repayment: '', // 还款方式
					repaymentType: ''
				},
				showRepaymentPop: false, // 是否显示还款方式弹窗
			};
		},
		methods: {
			/** 选择单位 **/
			selectUnit (type, value) {
				this.params[type] = value
			},
			/** 选择还款方式 **/
			selectType () {
				console.log(444)
				this.showRepaymentPop = true
			},
			/** 还款方式回调 **/
			selectTypeCb (repayment) {
				this.params.repayment = repayment.name
				this.params.repaymentType = repayment.value
			},
			/** 清空数据 **/
			clear () {
				this.params = {
					money: '', // 贷款金额
					priceUnit: 'wan',
					term: '', // 贷款期限
					termUnit: 'year',
					rate: '', // 贷款利率
					yOrmUnit: 'year', // 贷款利率周期
					repayment: '', // 还款方式
					repaymentType: '', // 还款方式Value
				}
			},
			/** 计算 **/
			submit () {
				if(Object.values(this.params).some((value) => !value)) return uni.showToast({
					icon: 'none',
					title: '请填写贷款信息数据'
				})
				uni.navigateTo({
					url: `/pages/mine/calc/calc-result?query=${JSON.stringify(this.params)}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.loan-calc-index {
	min-height: 100vh;
	position: relative;
	padding-top: 120rpx;
	.bg {
		top: 0;
		width: 100vw;
		height: 300rpx;
		background-color:  #2C405A;
		position: absolute;
	}
	.form {
		position: relative;
		z-index: 10;
		width: calc(100vw - 64rpx);
		margin: auto;
		padding:  32rpx;
		box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
		border-radius: 16rpx;
		background: #fff;
		.form-item {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			.inp-box {
				flex: 1;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				.lab {
					flex: none;
					width: 170rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					margin-right: 24rpx;
				}
				.inp {
					height: 80rpx;
					display: flex;
					align-items: center;
					position: relative;
					input {
						height: 80rpx;
						border-bottom: 2rpx solid #2C405A;
					}
					.inp-block {
						position: absolute;
						z-index: 20;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
					}
				}
			}
			.unit {
				flex: none;
				width: 140rpx;
				border-radius: 30rpx;
				height: 60rpx;
				border: 2rpx solid rgba(94,94,94,.5);
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				.text {
					text-align: center;
					width: 70rpx;
					height: 56rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-right: 2rpx solid rgba(94,94,94,.5);
					&:last-child {
						border: none;
					}
				}
				.active {
					color: #fff;
					background-color: #2C405A;
				}
			}
		}
	}
	
	.btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 60rpx;
		.cancel {
			box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
			border-radius: 45rpx;
			background-color: #f00;
			width: 200rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-weight: 600;
		}
		.submit {
			box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
			border-radius: 45rpx;
			background-color: #2C405A;
			width: 400rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-weight: 600;
		}
	}
}
</style>
